<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>实验环境 - 数据库教学系统</title>
  <link rel="stylesheet" href="/src/style.css">
  <link rel="stylesheet" href="/node_modules/@fortawesome/fontawesome-free/css/all.min.css">
</head>
<body class="bg-gray-50">
  <div class="min-h-screen flex">
    <!-- 侧边栏 -->
    <aside class="w-64 bg-white shadow-md">
      <div class="p-4 border-b border-gray-200">
        <h2 class="text-xl font-bold text-gray-800">数据库教学系统</h2>
      </div>
      <nav class="p-4 space-y-2">
        <a href="/student/dashboard.html" class="nav-item flex items-center">
          <i class="fas fa-home mr-3"></i>我的课程
        </a>
        <a href="/student/lab.html" class="nav-item active flex items-center">
          <i class="fas fa-flask mr-3"></i>实验环境
        </a>
        <a href="/student/assignments.html" class="nav-item flex items-center">
          <i class="fas fa-tasks mr-3"></i>作业管理
        </a>
        <a href="/student/profile.html" class="nav-item flex items-center">
          <i class="fas fa-user mr-3"></i>个人资料
        </a>
      </nav>
    </aside>

    <!-- 主要内容区 -->
    <main class="flex-1 p-8">
      <div class="flex justify-between items-center mb-8">
        <h1 class="text-2xl font-bold text-gray-800">实验环境</h1>
        <div class="flex items-center space-x-4">
          <button class="btn btn-primary">
            <i class="fas fa-plus mr-2"></i>新建实验
          </button>
        </div>
      </div>

      <!-- 实验列表 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- 实验卡片 -->
        <div class="card">
          <div class="flex items-center justify-between mb-4">
            <div class="flex items-center space-x-3">
              <div class="p-3 bg-blue-100 text-primary rounded-lg">
                <i class="fas fa-database text-xl"></i>
              </div>
              <div>
                <h3 class="font-semibold text-gray-800">SQL基础操作实验</h3>
                <p class="text-sm text-gray-500">数据库系统概论</p>
              </div>
            </div>
            <span class="px-2 py-1 text-sm rounded-full bg-green-100 text-success">进行中</span>
          </div>
          <div class="space-y-3">
            <div class="flex justify-between text-sm">
              <span class="text-gray-600">完成进度</span>
              <span class="text-primary">75%</span>
            </div>
            <div class="bg-gray-200 rounded-full h-2">
              <div class="bg-primary rounded-full h-2" style="width: 75%"></div>
            </div>
            <div class="flex justify-between text-sm">
              <span class="text-gray-500">截止日期：2024-01-20</span>
              <button class="btn btn-primary">继续实验</button>
            </div>
          </div>
        </div>

        <div class="card">
          <div class="flex items-center justify-between mb-4">
            <div class="flex items-center space-x-3">
              <div class="p-3 bg-blue-100 text-primary rounded-lg">
                <i class="fas fa-table text-xl"></i>
              </div>
              <div>
                <h3 class="font-semibold text-gray-800">数据库设计实验</h3>
                <p class="text-sm text-gray-500">数据库设计</p>
              </div>
            </div>
            <span class="px-2 py-1 text-sm rounded-full bg-yellow-100 text-warning">未开始</span>
          </div>
          <div class="space-y-3">
            <div class="flex justify-between text-sm">
              <span class="text-gray-600">完成进度</span>
              <span class="text-primary">0%</span>
            </div>
            <div class="bg-gray-200 rounded-full h-2">
              <div class="bg-primary rounded-full h-2" style="width: 0%"></div>
            </div>
            <div class="flex justify-between text-sm">
              <span class="text-gray-500">截止日期：2024-01-25</span>
              <button class="btn btn-primary">开始实验</button>
            </div>
          </div>
        </div>

        <div class="card">
          <div class="flex items-center justify-between mb-4">
            <div class="flex items-center space-x-3">
              <div class="p-3 bg-blue-100 text-primary rounded-lg">
                <i class="fas fa-cogs text-xl"></i>
              </div>
              <div>
                <h3 class="font-semibold text-gray-800">性能优化实验</h3>
                <p class="text-sm text-gray-500">数据库优化与管理</p>
              </div>
            </div>
            <span class="px-2 py-1 text-sm rounded-full bg-gray-100 text-gray-600">已完成</span>
          </div>
          <div class="space-y-3">
            <div class="flex justify-between text-sm">
              <span class="text-gray-600">完成进度</span>
              <span class="text-primary">100%</span>
            </div>
            <div class="bg-gray-200 rounded-full h-2">
              <div class="bg-primary rounded-full h-2" style="width: 100%"></div>
            </div>
            <div class="flex justify-between text-sm">
              <span class="text-gray-500">得分：95分</span>
              <button class="btn btn-secondary">查看报告</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 实验指南 -->
      <div class="card mt-8">
        <h2 class="text-xl font-bold text-gray-800 mb-6">实验指南</h2>
        <div class="space-y-4">
          <div class="flex items-start space-x-4">
            <div class="p-2 bg-blue-100 text-primary rounded">
              <i class="fas fa-info-circle"></i>
            </div>
            <div>
              <h3 class="font-semibold text-gray-800 mb-1">实验环境说明</h3>
              <p class="text-gray-600">本实验环境基于MySQL 8.0，提供完整的数据库操作环境，支持DDL、DML等各类SQL操作。</p>
            </div>
          </div>

          <div class="flex items-start space-x-4">
            <div class="p-2 bg-green-100 text-success rounded">
              <i class="fas fa-check-circle"></i>
            </div>
            <div>
              <h3 class="font-semibold text-gray-800 mb-1">实验要求</h3>
              <p class="text-gray-600">请按照实验指导书的要求完成实验，注意保存实验过程中的关键截图和SQL语句。</p>
            </div>
          </div>

          <div class="flex items-start space-x-4">
            <div class="p-2 bg-yellow-100 text-warning rounded">
              <i class="fas fa-exclamation-circle"></i>
            </div>
            <div>
              <h3 class="font-semibold text-gray-800 mb-1">注意事项</h3>
              <p class="text-gray-600">实验环境会自动保存，但建议及时提交实验报告。如遇问题请及时联系助教。</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</body>
</html>